<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.all{
				width: 800px;
				margin: 0 auto;
				/*background-color: lightgray;*/
			}
			h1{
				color: lightseagreen;
			}
			p{
				line-height: 30px;
				margin: 10px;
			}
			#divStr{
				font-size: 20px;
				line-height: 50px;
			}
			.change_div{
				margin: 0 auto;
				margin-top: 20px;
				background-color: deeppink;
				-webkit-animation: move1 5s;
				animation-fill-mode:forwards;
			}
			@-webkit-keyframes move1{
				0%{
					transform: rotateZ(0);
					border-radius: 0;
					width: 50px;
					height: 50px;
				}
				30%{
					transform: rotateZ(-90deg);
					/*border-radius: 75px;*/
				}
				66%{
					border-radius: 75px;
				}
				95%{
					width: 150px;
					height: 150px;
					border-image-transform: 75px;
				}
				100%{
					width: 150px;
					height: 150px;
					transform: rotateZ(-90deg);
					border-radius: 75px;
				}
			}
		</style>
	</head>
	<body>
		<!--
			作业: 求出abcdgbcdabddaabbdgbb 这个字符串中 出现次数最高的字符, 并输出其出现的次数!
				- CSS3新增伪类选择器有哪些?
				- 用CSS编写, div旋转90度, 0.5秒后变圆, 0.5秒后放大?
				- 列举2种强制类型转换和1种隐式类型装换?
				- split()和join()的区别?
		-->
		<div class="all">
			<!--1-->
			<div>
				<h1>1. 求字符串中出现次数最高的字符, 并输出其出现的次数!</h1>
				<div id="divStr"></div>
			</div>
			<!--2-->
			<div>
				<h1>2. CSS3新增伪类选择器有哪些?</h1>
				<p>:first-of-type p:first-of-type 选择属于其父元素的首个&lt;p&gt;元素的每个&lt;p&gt;元素。</p>  
				<p>:last-of-type p:last-of-type 选择属于其父元素的最后元素的每个元素。</p>
				<p>:only-of-type p:only-of-type 选择属于其父元素唯一的&lt;p&gt;元素的每个&lt;p&gt;元素。</p>
				<p>:only-child p:only-child 选择属于其父元素的唯一子元素的每个&lt;p&gt;元素。</p>
				<p>:nth-child(n) p:nth-child(2) 选择属于其父元素的第二个子元素的每个&lt;p&gt;元素。</p>
				<p>:nth-last-child(n) p:nth-last-child(2) 同上，从最后一个子元素开始计数。</p>
				<p>:nth-of-type(n) p:nth-of-type(2) 选择属于其父元素第二个&lt;p&gt;元素的每个&lt;p&gt;元素。</p>   
				<p>:nth-last-of-type(n) p:nth-last-of-type(2) 同上，但是从最后一个子元素开始计数。</p> 
				<p>:last-child p:last-chil  选择属于其父元素最后一个子元素每个&lt;p&gt;元素。 </p> 
				<p>:root :root 选择文档的根元素。 </p>  
				<p>:empty p:empty 选择没有子元素的每个&lt;p&gt;元素（包括文本节点).</p>
				<p>:target #news:target 选择当前活动的 #news 元素。</p>
				<p>:enabled input:enabled 选择每个启用的&lt;input&gt;元素。</p>
				<p>:disabled input:disable  选择每个禁用的&lt;input&gt;元素 </p> 
				<p>:checked input:checked 选择每个被选中的&lt;input&gt;元素。</p>
				<p>:not(selector) :not(p) 选择非&lt;p&gt;元素的每个元素。</p>
				<p>::selection ::selection 选择被用户选取的元素部分。</p>
			</div>
			<!--3-->
			<div style="height: 200px;">
				<h1>3. 用CSS编写, div旋转90度, 0.5秒后变圆, 0.5秒后放大</h1>
				<div class="change_div"></div>
			</div>
			<!--4-->
			<div>
				<h1>4. 列举2种强制类型转换和1种隐式类型装换</h1>
				<p>
					强制类型装换: <br /> 1.转换为Nubmer var a ="123";a = Number(a);(讲string强行装换成number)<br />
					2.转换为string字符串类型 var a = 123; a = String(a);(讲number强行装换成string)
				</p>
				<p>隐式类型装换: var q = "123" var w = 123; 打印(w + q)的时候就将w隐式转换成了字符串类型；</p>
			</div>
			<!--5-->
			<div>
				<h1>5. split()和join()的区别</h1>
				<p>split() 方法用于把一个字符串分割成字符串数组。</p>
				<p>join() 方法用于把数组中的所有元素放入一个字符串。</p>
			</div>
		</div>
		<!--第五题试验-->
		<script type="text/javascript">
			var str="How are you doing today?";
			console.log(str.split(" "));
			console.log(str.split(""));
			console.log(str.split(" ",3));

			var arr =  ["George", "John", "Thomas"];
			console.log(arr.join());
			console.log(arr.join(""));
			console.log(arr.join(" "));
		</script>
		<!--第一题js代码-->
		<script type="text/javascript">
			var strDiv = document.getElementById("divStr");
			var str = 'abcdgbcdabddaabbdgbb';
			var json = {};
			for (var i=0;i<str.length;i++) {
				if (!json[str.charAt(i)]) {//charAt() 方法可返回指定位置的字符
					 // 首先得到i位置的字符char  再判断 json[char]是否存在 如果不存在就赋值为1
					json[str.charAt(i)] = 1;
				} else{ //如果存在 就在原来值的基础上加1
					json[str.charAt(i)]++;
				}
			}
			var iMax = 0;
			var iIndex = '';
			for(var i in json){//遍历JSON对象
				console.log(json[i]);
				if(json[i] > iMax){
					iMax = json[i];
					iIndex = i;
				}
			}
			strDiv.innerHTML = "出现次数最多的是: " + iIndex + ";&nbsp;" + "出现" + iMax + "次";
		</script>
	</body>
</html>
